<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <title th:text="#{cas.oauth.confirm.pagetitle}"></title>
</head>

<body id="cas">
<div layout:fragment="content" class="mdc-card card p-4 m-auto w-lg-66">
    <h2 th:text="#{cas.oauth.device.confirm.header}"/>
    <p class="my-2" th:text="#{cas.oauth.device.confirm.message}"/>
    <div class="banner banner-danger alert alert-danger my-2" th:if="${error}">
        <a href="#" class="close" data-dismiss="alert" th:aria-label="#{screen.pm.button.close}">&times;</a>
        <span th:utext="#{${'cas.oauth.device.error.' + error}}"/>
    </div>
    <form method="post" id="fm1">
        <section class="cas-field form-group my-3 mdc-input-group">
            <div class="mdc-input-group-field mdc-input-group-field-append">
                <div class="d-flex">
                    <label for="usercode"
                           class="mdc-text-field caps-check mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon">
                            <span class="mdc-notched-outline">
                                <span class="mdc-notched-outline__leading"></span>
                                <span class="mdc-notched-outline__notch">
                                    <span class="mdc-floating-label">Code</span>
                                </span>
                                <span class="mdc-notched-outline__trailing"></span>
                            </span>
                        <input class="mdc-text-field__input form-control pwd"
                               placeholder="code..."
                               type="password"
                               name="usercode"
                               aria-describedby="code-prefix"
                               id="usercode"
                               aria-label="UserCode"
                               size="25"
                               autocomplete="off"
                               required/>
                        <button
                                class="reveal-password align-self-end mdc-button mdc-button--unelevated mdc-input-group-append mdc-icon-button btn btn-primary"
                                tabindex="-1" type="button" th:title="#{screen.pm.password.toggle}">
                            <i class="mdi mdi-eye reveal-password-icon fas fa-eye" aria-hidden="true"></i>
                        </button>
                    </label>
                </div>
            </div>
        </section>
        <div th:replace="~{fragments/submitbutton :: submitButton (messageKey='screen.oauth.confirm.allow')}"/>
    </form>
</div>
</body>

</html>
